import React, { useState, useEffect, memo } from 'react';
import { connect } from 'react-redux';
import { useHistory } from 'react-router';
import { searchAction, delHistoryAction, getSearchAction } from '../../store/actions';
import style from './index.module.scss';
import NewGoods from '../../components/NewGoods';
const WrapNewGoods = memo(NewGoods);
interface Iprops {
    getSearch: () => void,
    delHistory: () => void,
    cancelSearch: () => void,
    setSearch: (keyword: string,page:string,size:string,order:string,categoryId:string,sort:string) => void,
    hotKeywordList: Array<object>,
    historyKeywordList: Array<object>,
    filterCategory: Array<object>,
    goodsList: Array<object>,
    defaultKeyword: { [key: string]: any },
}

const Leave: React.FC<Iprops> = props => {
    const history = useHistory();
    const [value, setValue] = useState('');//搜索关键字
    const [type, setType] = useState('');//历史记录，热门搜索点击关键字
    const [navIndex, setNavIndex] = useState(0);//nav tab切换
    const [showIndex, setShowIndex] = useState(-1);
    const [navlist] = useState([
        { id: 0, title: '综合' },
        { id: 1, title: '价格' },
        { id: 2, title: '全部分类' }
    ]);
    const [order, setOrder] = useState('');//升/降序
    const [show, setShow] = useState(false);//全部分类
    const { hotKeywordList, historyKeywordList, defaultKeyword, goodsList,filterCategory } = props;
   
    useEffect(() => {
        props.getSearch()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [goodsList])
    const keyDown = (e: any) => {
        if (e.keyCode === 13) props.setSearch(value,'1','100',order?order:'desc','0','id')
    }
    const cancel = () => {
        setValue('');
        props.cancelSearch()
    }
    const sort = (e:any,orders: string) => {//价格排序
        e.stopPropagation();
        setNavIndex(1);
        setOrder(orders);
        props.setSearch(type,'1','100',orders,'0','price')
    }
    const navFunc = (id: number) => {//nav切换
        setNavIndex(id);
        if(id === 0){
            props.setSearch(type,'1','100',order?order:'desc','0','id')
        }else if(id === 1){
            setOrder('asc')
            props.setSearch(type,'1','100','asc','0','price')
        }else if(id === 2){
            setShow(!show)
        }
    }
    const search = (types:string)=>{
        setType(types);
        props.setSearch(types,'1','100',order?order:'desc','0','id')
    }
    const navShow = (index:number,id:number)=>{
        setShowIndex(index);
        setShow(false)
        props.setSearch(type,'1','100',order?order:'desc',`${id}`,'id')
    }
   
    return <div className={style.search}>

        <div className={style.header}>
            <span><i className="iconfont icon-xiangzuo" onClick={() => history.goBack()} /></span>
            <div className={style.inputWrap}>
                <i className="iconfont icon-fangdajing" />
                <input
                    type="text"
                    value={value}
                    placeholder={defaultKeyword && defaultKeyword.keyword}
                    onChange={(e) => setValue(e.target.value)}
                    onKeyDown={e => keyDown(e)}
                />
            </div>
            <span onClick={cancel}>取消</span>
        </div>

        {
            goodsList && goodsList.length > 0
                ?
                <div className={style.divContent}>
                    <div className={style.nav}>
                        {
                            show
                            ?
                            <div className={style.show}>
                                {
                                    filterCategory.map((item:{[key:string]:any},index:number)=>{
                                        return <span
                                            key={item.id}
                                            className={showIndex===index?style.active:""}
                                            onClick={()=>navShow(index,item.id)}
                                        >
                                            {item.name}
                                        </span>
                                    })
                                }
                            </div>
                            :
                            null
                        }
                        {
                            navlist.map(item => {
                                return <span
                                    key={item.id}
                                    className={[style.spanItem, item.id === navIndex ? style.navactive : ""].join(' ')}
                                    onClick = {()=>navFunc(item.id)}
                                >{item.title}
                                    {
                                        item.id === 1
                                            ?
                                            <div className={style.arrow}>
                                                <span
                                                    className={[style.asc, order === 'asc' ? style.active : ""].join(' ')}
                                                    onClick={(e) => sort(e,'asc')}
                                                ></span>
                                                <span
                                                    className={[style.desc, order === 'desc' ? style.active : ""].join(' ')}
                                                    onClick={(e) => sort(e,'desc')}
                                                ></span>
                                            </div>
                                            :
                                            null
                                    }
                                </span>
                            })
                        }
                    </div>
                    <div className={style.divWrap}>
                        <WrapNewGoods newGoodsList={props.goodsList} titleFlag={false} />
                    </div>
                </div>
                :
                <div>
                    {historyKeywordList && historyKeywordList.length > 0
                        ?
                        <div className={style.module}>
                            <div className={style.title}>
                                <span>历史记录</span>
                                <i className="iconfont icon-shanchu" onClick={() => props.delHistory()} />
                            </div>
                            <div className={style.content}>
                                {
                                    historyKeywordList && historyKeywordList.map((item: any, index: number) => {
                                        return <button
                                            key={index}
                                            onClick={() =>search(item)}
                                        >{item}</button>
                                    })
                                }
                            </div>
                        </div>
                        :
                        null
                    }
                    <div className={style.module}>
                        <div className={style.title}>
                            <span>热门搜索</span>
                        </div>
                        <div className={style.content}>
                            {
                                hotKeywordList && hotKeywordList.map((item: any, index: number) => {
                                    return <button
                                        key={index}
                                        className={item.is_hot === 1 ? style.active : ''}
                                        onClick={() =>search(item.keyword)}
                                    >{item.keyword}</button>
                                })
                            }
                        </div>
                    </div>
                </div>
        }
    </div>
}
const mapStateToProps = (state: any) => {
    return state.search
}
const mapDispatchToProps = (dispatch: Function) => {
    return {
        getSearch: () => {
            dispatch(searchAction());
        },
        delHistory: () => {
            dispatch(delHistoryAction());
            dispatch(searchAction());
        },
        setSearch: (keyword: string,page:string,size:string,order:string,categoryId:string,sort:string) => {
            dispatch(getSearchAction(keyword,page,size,order,categoryId,sort));
        },
        cancelSearch: () => {
            dispatch({
                type: 'CANCEL_SEARCH',
                payload: ''
            })
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Leave) 
